<template>
  <div class="gen-edit-container">
    <el-card class="gen-edit-card" :body-style="{ height: '100%' }">
      <el-tabs v-model="activeName" :style="{ height: '100%' }">
        <el-tab-pane label="基本信息" name="basic">
          <basic-info-form ref="basicInfo" :info="info"/>
        </el-tab-pane>
        <el-tab-pane label="字段信息" name="cloum">
          <el-table
            ref="dragTable"
            :data="cloumns"
            row-key="columnId"
            :max-height="tableHeight"
          >
            <el-table-column
              label="序号"
              type="index"
              min-width="5%"
              class-name="allowDrag"
            />
            <el-table-column
              label="字段列名"
              prop="columnName"
              min-width="10%"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="字段描述" min-width="10%">
              <template slot-scope="scope">
                <el-input v-model="scope.row.columnComment"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="物理类型"
              prop="columnType"
              min-width="10%"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="Java类型" min-width="11%">
              <template slot-scope="scope">
                <el-select v-model="scope.row.javaType">
                  <el-option label="Long" value="Long" />
                  <el-option label="String" value="String" />
                  <el-option label="Integer" value="Integer" />
                  <el-option label="Double" value="Double" />
                  <el-option label="BigDecimal" value="BigDecimal" />
                  <el-option label="Date" value="Date" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="java属性" min-width="10%">
              <template slot-scope="scope">
                <el-input v-model="scope.row.javaField"></el-input>
              </template>
            </el-table-column>

            <el-table-column label="插入" min-width="5%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  v-model="scope.row.isInsert"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="编辑" min-width="5%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  v-model="scope.row.isEdit"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="列表" min-width="5%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  v-model="scope.row.isList"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="查询" min-width="5%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  v-model="scope.row.isQuery"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="查询方式" min-width="10%">
              <template slot-scope="scope">
                <el-select v-model="scope.row.queryType">
                  <el-option label="=" value="EQ" />
                  <el-option label="!=" value="NE" />
                  <el-option label=">" value="GT" />
                  <el-option label=">=" value="GTE" />
                  <el-option label="<" value="LT" />
                  <el-option label="<=" value="LTE" />
                  <el-option label="LIKE" value="LIKE" />
                  <el-option label="BETWEEN" value="BETWEEN" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="必填" min-width="5%">
              <template slot-scope="scope">
                <el-checkbox
                  true-label="1"
                  v-model="scope.row.isRequired"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="显示类型" min-width="12%">
              <template slot-scope="scope">
                <el-select v-model="scope.row.htmlType">
                  <el-option label="文本框" value="input" />
                  <el-option label="文本域" value="textarea" />
                  <el-option label="下拉框" value="select" />
                  <el-option label="单选框" value="radio" />
                  <el-option label="复选框" value="checkbox" />
                  <el-option label="日期控件" value="datetime" />
                  <!-- <el-option label="图片上传" value="imageUpload" />
                  <el-option label="文件上传" value="fileUpload" /> -->
                  <!-- <el-option label="富文本控件" value="editor" /> -->
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="字典类型" min-width="12%">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.dictType"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="dict in dictOptions"
                    :key="dict.name"
                    :label="dict.name"
                    :value="dict.code"
                  >
                    <span style="float: left">{{ dict.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">
                      {{ dict.code }}
                    </span>
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="枚举类型" min-width="12%" prop="enumType">
              <template slot-scope="scope">
                <el-input v-model="scope.row.enumType"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="生成信息" name="genInfo" :style="{ height: '100%' }">
          <gen-info-form
            ref="genInfo"
            :info="info"
            :tables="tables"
            :menus="menus"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <div style="text-align: center; margin-left: -100px; margin-top: 10px">
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="backHandle">返回</el-button>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import _ from "lodash";
import basicInfoForm from "./basicInfoForm";
import genInfoForm from "./genInfoForm";
import Sortable from "sortablejs";

export default {
  name: "GenEdit",
  components: {
    basicInfoForm,
    genInfoForm,
  },
  props: {
    genEditTableId: {
      type: String,
      require: true,
    },
  },
  data() {
    return {
      // 选中选项卡的 name
      activeName: "cloum",
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 245 + "px",
      // 表信息
      tables: [],
      // 表列信息
      cloumns: [],
      // 字典信息
      dictOptions: [],
      // 菜单信息
      menus: [],
      // 表详细信息
      info: {},
    };
  },
  mounted() {
    const el = this.$refs.dragTable.$el.querySelectorAll(
      ".el-table__body-wrapper > table > tbody"
    )[0];
    const sortable = Sortable.create(el, {
      handle: ".allowDrag",
      onEnd: (evt) => {
        const targetRow = this.cloumns.splice(evt.oldIndex, 1)[0];
        this.cloumns.splice(evt.newIndex, 0, targetRow);
        for (let index in this.cloumns) {
          this.cloumns[index].sort = parseInt(index) + 1;
        }
      },
    });
  },
  created() {
    this.initData(this.genEditTableId);
  },
  methods: {
    async initData(tableId) {
      if (tableId) {
        const loading = this.$loading({
          lock: true,
          text: "数据加载中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        try {
          const menuRes = await request({
            url: "/admin/sysMenu/getAllMenuData",
            method: "post",
          });
          if (menuRes.success) {
            if (menuRes.parameters && menuRes.parameters.treeData) {
              this.menus = menuRes.parameters.treeData;
            }
          }
          const dictRes = await request({
            url: "/admin/sysDictType/allDictType",
            method: "get",
          });
          if (dictRes.success) {
            if (dictRes.parameters && dictRes.parameters.dictTypeOptions) {
              this.dictOptions = dictRes.parameters.dictTypeOptions;
            }
          }
          const genTableDetailsRes = await request({
            url: "/tool/gen/" + tableId,
            method: "get",
          });
          const { success, parameters } = genTableDetailsRes;
          if (success) {
            if (parameters && parameters.data) {
              const { info, rows, tables } = parameters.data;
              this.cloumns = rows;
              this.info = info;
              this.tables = tables;
            }
          }
          loading.close();
        } catch (error) {
          loading.close();
        }
      }
    },
    submitForm() {
      const basicForm = this.$refs.basicInfo.$refs.basicInfoForm;
      const genForm = this.$refs.genInfo.$refs.genInfoForm;
      Promise.all([basicForm, genForm].map(this.getFormPromise)).then((res) => {
        const validateResult = res.every((item) => !!item);
        if (validateResult) {
          const loading = this.$loading({
            lock: true,
            text: "数据提交中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          const genTable = Object.assign({}, basicForm.model, genForm.model);
          genTable.columns = this.cloumns;
          genTable.params = {
            treeCode: genTable.treeCode,
            treeName: genTable.treeName,
            treeParentCode: genTable.treeParentCode,
            parentMenuId: genTable.parentMenuId,
          };
          request({
            headers: { "Content-Type": "application/json" },
            url: "/tool/gen/edit",
            method: "post",
            data: genTable,
          })
            .then(() => {
              loading.close();
              this.backHandle();
            })
            .catch((err) => {
              loading.close();
            });
        } else {
          this.msgError("表单校验未通过，请重新检查提交内容");
        }
      });
    },
    backHandle() {
      this.$emit("genEditCloseEvent");
    },
    getFormPromise(form) {
      return new Promise((resolve) => {
        form.validate((res) => {
          resolve(res);
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.gen-edit-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  .gen-edit-card {
    flex: 1;
  }
}
</style>

